<template>
    <div class="films-box">
        <div class="list-name">
            <span>热门电影</span>
        </div>
        <!-- 电影列表 -->
        <!-- <div class="content-list">
                    <film-item v-for="(film,index) in films" :key="film.filmId" :film="film"></film-item>
        </div>-->

        <filmList class="content-list" :list="films"></filmList>
    </div>
</template>
<script>
import filmList from "../components/filmList";
export default {
    components: {
        filmList
    },
    data() {
        return {
            films: []
        };
    },
    methods: {
        loadFilms() {
            $.ajax({
                url: "http://localhost/film-project/filmApi/loadFilms.php",
                dataType: "json",
                data: {
                    size: 11
                },
                success: ({ result }) => {
                    // console.log(result);
                    this.films = result;
                }
            });
        }
    },
    mounted() {
        this.loadFilms();
    }
};
</script>
<style lang="less" scoped>
// 分类页样式
.films-box{
    position: absolute;
    top: 0rem;
    bottom: 0rem;
    left: 0rem;
    right: 0rem;
    overflow-y: auto;
}
.content-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: left;
    width: 100%;
    font-size: 0rem;
    > * {
        margin-top: 0.2rem;
    }
}
</style>